<template>
  <div class="con">
    <div class="contbox6_10">
      <p class="titlelist6_10">
        商城管理
        <span class="text">&nbsp;&nbsp;/&nbsp;&nbsp;</span>商城订单
      </p>
      <div class="content">
        <el-form :model="formInline" class="demo-form-inline">
          <div class="jibenInfo">订单信息</div>
          <div class="contents">
            <el-form-item label="机构名称" label-width="100px">{{
              cont.officeName
            }}</el-form-item>
            <el-form-item label="手机号" label-width="100px">{{
              cont.phone
            }}</el-form-item>
            <el-form-item label="支付时间" label-width="100px">{{
              cont.payTime
            }}</el-form-item>
            <el-form-item label="付款方式" label-width="100px">{{
              cont.payType == 1
                ? "支付宝"
                : cont.payType == 2
                ? "账户支付"
                : cont.payType == 3
                ? "微信支付"
                : cont.payType == 4
                ? "线下转账"
                : ""
            }}</el-form-item>
            <el-form-item label="订单金额" label-width="100px">{{
              cont.amount
            }}</el-form-item>
            <el-form-item label="订单号" label-width="100px">{{
              cont.orderCode
            }}</el-form-item>
            <el-form-item
              label="收款账户"
              v-if="cont.payType == 4"
              label-width="100px"
              >{{ cont.accountName }}</el-form-item
            >
            <el-form-item
              label="收款账号"
              v-if="cont.payType == 4"
              label-width="100px"
              >{{ cont.accountNo }}</el-form-item
            >
            <el-form-item
              label="支付截图"
              v-if="cont.payType == 4"
              label-width="100px"
            >
              <div
                class="picUrl"
                style="width: 80px; height: 80px"
                title="双击查看大图"
                @dblclick="shishiClick"
              >
                <img :src="cont.payImgUrl" width="100%" height="100%" alt="" />
              </div>
            </el-form-item>
            <el-form-item label="支付状态" label-width="100px">
              <span v-if="cont.payStatus == 0">未支付</span>
              <span v-if="cont.payStatus == 1">支付成功</span>
              <span v-if="cont.payStatus == 2">待确认</span>
              <span v-if="cont.payStatus == 3">支付失败</span>
            </el-form-item>
          </div>

          <div class="jibenInfo">收件人信息</div>
          <div class="contents">
            <el-form-item label="收货方式" label-width="100px">{{
              cont.shipType == 0 ? "快递" : "自提"
            }}</el-form-item>
            <el-form-item label="收件人" label-width="100px">{{
              cont.linkName
            }}</el-form-item>
            <el-form-item label="手机号" label-width="100px">{{
              cont.linkPhone
            }}</el-form-item>
            <el-form-item label="收件地址" label-width="100px">{{
              cont.addr
            }}</el-form-item>
          </div>
           <div style="clear:both"></div>
          <div class="jibenInfo">商品信息</div>
         <div style="clear:both"></div>
          <div class="goodsInfotTitle contents">
            <div style="padding-left:20px">商品品牌</div><div style="padding-left:20px">商品型号</div><div style="padding-left:20px">商品名称</div><div style="width:100px">商品数量</div><div style="width:80px">已发货</div><div style="width:80px">未发货</div>
          </div>
          <div
            class="contents"
            v-for="(item, index) in form.productInfoList"
            :key="index"
          >
          
            <div class="goodsInfotCont" style="padding: 0px 20px">
              <span
                ><b style="font-weight: 500">{{
                  item.channelName
                }}</b></span
              >
              <span style="margin-left: 20px"
                ><b style="font-weight: 500">{{
                  item.productNo
                }}</b></span
              >
              <span style="margin-left: 20px"
                ><b style="font-weight: 500">{{
                  item.productName
                }}</b></span
              >
              <span style="width:100px"
                ><b style="font-weight: 500">{{
                  item.buyNumber
                }}</b></span
              >
              <span style="width:80px"
                ><b style="font-weight: 500">{{
                  item.sendNumber
                }}</b></span
              >
              <span style="width:80px"
                ><b style="font-weight: 500">{{
                  item.unSendNumber
                }}</b></span
              >
              <el-button
                v-if="item.sendNumber!=0"
                size="mini"
                type="text"
                @click="seeChecked(item)"
                >已派发</el-button
              >
              <el-button
                v-if="item.sendNumber < item.buyNumber && cont.payStatus == 1"
                size="mini"
                @click="distribution(item, index)"
                type="text"
                >派发</el-button
              >
              <div class="detailes" v-if="item.snObj && item.snObj.length > 0">
                
                <el-button
                  size="mini"
                  @click="seeDistributionDetail(item, index)"
                  type="text"
                  >查看派发详情</el-button
                >
                <!-- <div>派发数量:{{ item.snObj.length }}</div> -->
              </div>
            </div>
            <div class="title_con" v-if="false">
              <div class="sj">
                <div class="title_son1">起始序列号</div>
                <div class="title_son1">终止序列号</div>
                <div
                  class="title_son1"
                  v-if="$route.query.shipStatus == 0"
                  style="width: 300px"
                >
                  校验
                </div>
                <div class="title_son2" v-if="$route.query.shipStatus == 0">
                  操作
                </div>
                <div class="title_son2" v-if="$route.query.shipStatus == 1">
                  总数量
                </div>
              </div>
              <div
                style="
                  width: 100%;
                  float: left;
                  min-height: 60px;
                  display: flex;
                "
                v-for="(items, indexs) in item.snInfoList"
                :key="indexs"
              >
                <div class="title_son1">
                  <el-input
                    maxlength="30"
                    :disabled="disabled"
                    v-model="items.startSn"
                  ></el-input>
                </div>
                <div class="title_son1">
                  <el-input
                    maxlength="30"
                    :disabled="disabled"
                    v-model="items.endSn"
                  ></el-input>
                </div>
                <div class="title_son1" v-if="$route.query.shipStatus == 1">
                  {{ items.productNum }}
                </div>
                <div
                  class="title_son1"
                  v-if="$route.query.shipStatus == 0"
                  style="width: 300px"
                >
                  <el-button
                    style="margin-rigth: 10px"
                    @click="check(index, indexs)"
                    type="primary"
                    >库存校验</el-button
                  >
                  商品数量{{ items.productNum }}
                </div>
                <div class="title_son2" v-if="$route.query.shipStatus == 0">
                  <div
                    class="add"
                    v-if="indexs == 0"
                    @click="adds(index, indexs)"
                  >
                    +
                  </div>
                  <div
                    @click="dels(index, indexs)"
                    v-if="indexs != 0 && indexs == item.snInfoList.length - 1"
                  >
                    <img src="../../assets/images/del.png" />
                  </div>
                </div>
                <div
                  v-if="$route.query.shipStatus == 1"
                  @click="details(index)"
                  style="color: #409eff"
                  class="title_son2"
                >
                  详情
                </div>
              </div>
            </div>
          </div>

          <div class="jibenInfo" v-if="$route.query.shipType == 0">
            物流信息
          </div>
          <div class="contents" v-if="$route.query.shipType == 0">
            <el-form-item label="物流公司" label-width="100px">
              <el-input
                maxlength="20"
                :disabled="disabled"
                v-model="form.expressName"
              ></el-input>
            </el-form-item>
            <el-form-item label="物流编号" label-width="100px">
              <el-input
                :disabled="disabled"
                v-model="form.expOrderCode"
                maxlength="40"
                @change="$forceUpdate()"
                @input="
                  (value) => {
                    form.expOrderCode = value.replace(/[\W]/g, '');
                  }
                "
              ></el-input
            ></el-form-item>
          </div>
          <div class="jibenInfo">
            <el-button
              v-if="!disabled"
              type="primary"
              style="margin-left: 40%"
              @click="sure"
              >确定</el-button
            >
            <el-button
              v-if="!disabled"
              style="margin-left: 10px"
              @click="cancel"
              >取消</el-button
            >
            <el-button v-if="disabled" style="margin-left: 40%" @click="cancel"
              >返回</el-button
            >
          </div>
        </el-form>
      </div>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="1500px">
      <div
        style="height: 48px; width: 25%; float: left"
        v-for="(it, ins) in list"
        :key="ins"
      >
        <span>{{ it.productCode }}</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <div class="maskBigger" @click="closeMastWrap" v-if="picBiggerBool"></div>
    <div class="picWrapper" v-if="picBiggerBool">
      <img :src="cont.payImgUrl" width="100%" height="100%" alt="" />
    </div>

    <!-- sn序列号的弹框 -->
    <el-dialog
      title="派发"
      :visible.sync="dialogVisibleSN"
      width="1000px"
      :before-close="handleClose"
    >
      <div class="listBox">
        <div class="listTable">
          <div class="searchBox">
            <div style="display: flex">
              <div style="margin-right: 20px">商品序列号</div>
              <el-input
                v-model="searSN.startSN"
                placeholder="请输入内容"
              ></el-input>
              &nbsp;&nbsp;-&nbsp;&nbsp;
              <el-input
                v-model="searSN.endSN"
                placeholder="请输入内容"
              ></el-input>
              <el-button
                size="mini"
                type="primary"
                @click="searchSN"
                style="margin-left: 20px"
                >查询</el-button
              >
            </div>
          </div>
          <div class="selectdBox">
            <el-checkbox v-model="checked" @change="allSelectSN"
              >全选</el-checkbox
            >
          </div>
          <div class="listTableWrap">
            <div
              class="listTableList"
              v-for="(item, index) in checkedObj"
              :key="index"
            >
              <el-checkbox v-model="item.checked" @change="allCheck2">{{
                item.productCode
              }}</el-checkbox>
            </div>
          </div>

          <!-- <el-pagination
            style="margin-top: 20px; margin-bottom: 20px"
            :small="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[24, 240, 480]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="snTotal"
          >
          </el-pagination> -->
        </div>
        <div style="margin-top: 20px">
          共有&nbsp;&nbsp;&nbsp;&nbsp;{{
            snTotal
          }}&nbsp;&nbsp;&nbsp;&nbsp;条数据
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleSN = false">取 消</el-button>
        <el-button type="primary" @click="SNsubmit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="已派发"
      :visible.sync="seedialogVisible"
      width="800px"
      :before-close="handleClose"
    >
      <div>
        <div class="catList">
          <div v-for="(item2,indx) in brandOfficeProductIolistDetailList" :key="indx" class="spanBlock">{{item2.productCode}}</div>

        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="seedialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="seedialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      brandOfficeProductIolistDetailList:"",
      // 是否选中
      checked: false,
      // 选中的sn
      snSelectTrue: [],
      // sn总页数
      snTotal: "",
      checkedObj: [],
      // num的值
      num: "",
      // 给后端传递的派发的sn
      snObj: "",
      seedialogVisible:false,//查看的框
      searSN: {
        productUid: "",
        page: "1",
        number: "24",
        startSN: "",
        endSN: "",
      },
      // 控制sn的弹框
      dialogVisibleSN: false,
      picBiggerBool: "", //控制是否显示大图
      list: [],
      dialogVisible: false,
      disabled: false,
      cont: [],
      cont2: [],
      undelivered:"",//存未发货数量
      shipStatus: this.$route.query.shipStatus,
      orderCode: this.$route.query.orderCode,
      form: [
        {
          name: "111",
          list: [
            {
              name: "xxxx",
              level: "12",
            },
          ],
        },
      ],
    };
  },
  created() {
    if (this.$route.query.statausBool == 1) {
      this.disabled = true;
    }
    axios
      .post("/api/mall/queryProductInfo", {
        orderCode: this.orderCode,
      })
      .then((res) => {
        if (res.data.code == "0000") {
          this.cont = res.data.data;
          this.cont2 = res.data.productInfo.productInfoList;
          this.form = res.data.productInfo;
        } else {
          return layer.open({
            content: res.data.msg,
            skin: "msg",
            time: 2,
          });
        }
      });
  },
  mounted() {
    document.addEventListener("keyup", (e) => {
      if (e.keyCode == 27) {
        this.picBiggerBool = false; //事件名
      }
    });
  },
  methods: {
    // 点击查看打开
    seeChecked(val){
      console.log(val)
      this.brandOfficeProductIolistDetailList = val.brandOfficeProductIolistDetailList
      this.seedialogVisible = true
    },
    seeSNlist(){
      axios.post("",{}).then(res=>{
        console.log(res)
      }).cat(err=>{
        console.log(err)
      })
    },
    // 搜索序列号
    searchSN() {
      // 搜索的时候存一下当前页面选中的值
      // let bigObj = [];
      // for (let i = 0; i < this.checkedObj.length; i++) {
      //   if (this.checkedObj[i].checked == true) {
      //     bigObj.push(this.checkedObj[i]);
      //   }
      // }
      // sessionStorage.setItem("snObj", JSON.stringify(bigObj));
      this.getSNlist();
      // setTimeout(() => {
      //   let sessStr = sessionStorage.getItem("snObj", JSON.stringify(bigObj));
      //   sessStr = JSON.parse(sessStr);
      //   // alert(sessStr)
      //   // 判断本地是否有和列表id相同的值  如果有 把数据设置为true
      //   for (let i = 0; i < this.checkedObj.length; i++) {
      //     for (let j = 0; j < sessStr.length; j++) {
      //       if (this.checkedObj[i].id == sessStr[j].id) {
      //         this.checkedObj[i].checked = true;
      //       }
      //     }
      //   }
      // }, 1000);
    },
    // 点击下面的来判断是否全选选中
    allCheck2() {
      for (let i = 0; i < this.checkedObj.length; i++) {
        if (this.checkedObj[i].checked == false) {
          this.checked = false;
        }
      }
    },
    cat() {
      console.log(this.form);
    },
    // 派发点击
    distribution(val, num) {
      console.log(num)
      console.log(val);
      // 存一下当前点击的未发货的数量
      this.undelivered = val.unSendNumber
      this.searSN.startSN = "";
      this.searSN.endSN = "";
      this.num = num;
      this.checked = false;
      this.searSN.productUid = val.productUid;
      this.getSNlist();
      this.dialogVisibleSN = true;
    },
    // 全选功能
    allSelectSN() {
      console.log("发生变化");

      if (this.checked == true) {
        for (let i = 0; i < this.checkedObj.length; i++) {
          this.checkedObj[i].checked = true;
        }
      } else {
        for (let i = 0; i < this.checkedObj.length; i++) {
          this.checkedObj[i].checked = false;
        }
      }
    },
    // 全不选
    noAllSelectSN() {
      for (let i = 0; i < this.checkedObj.length; i++) {
        this.checkedObj[i].checked = false;
      }
    },
    // 查看派发详情
    seeDistributionDetail(val, num) {
      // this.checkedObj = this.snSelectTrue;
      // let val = sessionStorage.getItem("snObj")
      this.searSN.startSN = "";
      this.searSN.endSN = "";
      this.checked = true;
      this.checkedObj = val.snObj;
      this.snTotal = val.snObj.length
      this.dialogVisibleSN = true;
    },
    // 点击派发获取sn号
    getSNlist() {
      axios
        .post("api/mall/getProductStockList", this.searSN)
        .then((res) => {
          console.log("sn号");
          //对获取的数据进行处理
          let snArr = res.data.data;
          console.log(res.data.data);
          this.snTotal = res.data.total;
          let checkobjArr = [];
          checkobjArr = snArr.map((item, index) => {
            return (item.checked = false);
          });
          for (let i = 0; i < snArr.length; i++) {
            snArr.checked = false;
          }
          // if(this.snSelectTrue.length>0){
          //   // 循环判断如果请求的数据里面如果有和选中的ID一样的就把他的checked改为ture
          //   for(let i =0;i<snArr.length;i++){
          //     for(let j =0;j<this.snSelectTrue.length;j++){
          //       if(snArr[i].id==this.snSelectTrue[j].id){
          //         snArr[i].checked = true
          //       }
          //     }
          //   }
          // }
          this.checkedObj = snArr;
          console.log(this.checkedObj);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // SN确定的时候存一下
    SNsubmit() {
      let bigObj = [];
      for (let i = 0; i < this.checkedObj.length; i++) {
        if (this.checkedObj[i].checked == true) {
          bigObj.push(this.checkedObj[i]);
        }
      }
      if(this.undelivered<bigObj.length){
        layer.open({
              content: "派发数量不能大于未发货数量",
              skin: "msg",
              time: 1 //1秒后自动关闭
            });
        return
      }

      this.snObj = bigObj;
      sessionStorage.setItem("snObj", JSON.stringify(bigObj));

      console.log("这里是form");
      console.log(this.form.productInfoList[this.num]);
      this.form.productInfoList[this.num].snObj = bigObj;
      // sessionStorage.setItem("snObj",val)
      // // // alert(val)
      // val = JSON.parse(val)
      this.dialogVisibleSN = false;
      // setTimeout(() => {
      //   this.checkedObj = val
      // }, 200);
      // alert(JSON.stringify(bigObj));
    },
    // 分页的一页几条
    handleSizeChange(val) {
      console.log(val);
      this.searSN.number = val;
      this.getSNlist();
    },
    // 分页发生变化的时候
    handleCurrentChange(val) {
      console.log(val);
      this.searSN.page = val;
      let snObj = sessionStorage.getItem("snObj");
      JSON.parse(snObj);
      this.getSNlist();
      console.log("值是");
      console.log(this.checkedObj);
      //
    },
    // 关闭大图显示
    closeMastWrap() {
      this.picBiggerBool = false;
    },
    // 查看图片
    shishiClick() {
      this.picBiggerBool = true;
    },

    // 点击详情
    details(index) {
      this.list = this.form.productInfoList[
        index
      ].brandOfficeProductIolistDetailList;
      this.dialogVisible = true;
    },
    adds(index, indexs) {
      if (
        this.form.productInfoList[index].snInfoList[indexs].productNum == ""
      ) {
        return layer.open({
          content: "请先校验库存数量",
          skin: "msg",
          time: 2,
        });
      } else {
        this.form.productInfoList[index].snInfoList.push({
          endSn: "",
          productNum: "",
          startSn: "",
        });
      }
    },
    // 删除
    dels(index, indexs) {
      this.form.productInfoList[index].snInfoList.splice(indexs, 1);
    },
    // 库存校验
    check(index, indexs) {
      this.$set(
        this.form.productInfoList[index].snInfoList[indexs],
        "productUid",
        this.form.productInfoList[index].productUid
      );
      axios
        .post(
          "/api/mall/productInfoVerify",
          this.form.productInfoList[index].snInfoList[indexs]
        )
        .then((res) => {
          console.log(res);
          if (res.data.code == "0000") {
            this.form.productInfoList[index].snInfoList[indexs].productNum =
              res.data.buyNumber;
          } else {
            return layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 2,
            });
          }
        });
    },
    // 取消
    cancel() {
      this.$router.push("orderSent");
    },
    // 点击确定
    sure() {
      // for (let i = 0; i < this.form.productInfoList.length; i++) {
      //   for (
      //     let j = 0;
      //     j < this.form.productInfoList[i].snInfoList.length;
      //     j++
      //   ) {
      //     if (this.form.productInfoList[i].snInfoList[j].productNum == "") {
      //       return layer.open({
      //         content: "请进行库存检验",
      //         skin: "msg",
      //         time: 2,
      //       });
      //     }
      //   }
      // }
      // 传递的数据
      console.log("传递的数据");
      console.log(this.form);
      this.form.shipType = this.cont.shipType;
      axios
        .post("api/mall/saveDistributeInfo", this.form)
        .then((res) => {
          console.log(res);
          if (res.data.code == "0000") {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 1, //1秒后自动关闭
            });
            this.$router.push("orderSent");
          } else {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 1, //1秒后自动关闭
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });

      // if (this.$route.query.shipStatus == 1) {
      //   this.$router.push("orderSent");
      // } else {
      //   this.form.shipType = this.cont.shipType;
      //   axios
      //     .post("api/mall/saveDistributeInfo", this.form)
      //     .then((res) => {
      //       console.log("好");
      //       console.log(res);
      //     })
      //     .catch((err) => {
      //       console.log(err);
      //     });
      // }
    },
    destroyed() {
      sessionStorage.removeItem("snObj");
    },
  },
};
</script>
<style scoped>
.con {
  position: relative;
}
.contbox6_10 {
  width: 100%;
  /* margin-left: 2%; */
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.contents {
  background: #f9fafc;
  float: left;
  margin: 0 20px;
  padding-top: 20px;
  width: calc(100% - 40px);
}
.jibenInfo {
  font-size: 18px;
  width: calc(100% - 40px);
  margin: 10px 0px;
  height: 30px;
  line-height: 30px;
  padding-left: 20px;
  /* background: #f9fafc; */
  float: left;
}
.el-form-item {
  width: 400px;
}
.listTableWrap {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #ebeef5;
  max-height: 500px;
  overflow-y: auto;
}
.listTableWrap > .listTableList {
  width: 33.3333%;
  border-right: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
  box-sizing: border-box;
  padding: 10px 0;
  text-align: center;
}
.cont {
  float: left;
  margin-left: 20px;
  /*  padding-left: 20px; */
  width: calc(100% - 40px);
}
.title_con {
  background: #f9fafc;
  width: 100%;
  min-height: 20px;
  float: left;
  padding: 0px 20px;
}
.sj {
  min-height: 50px;
  width: 100%;
  float: left;
  overflow-x: auto;
  display: flex;
  border-bottom: 1px solid #ccc;
}
.title_son {
  width: 128px;
  float: left;
  line-height: 50px;
}
.title_son1 {
  width: 250px;
  float: left;
  line-height: 50px;
}
.title_son2 {
  width: 100px;
  float: left;
  line-height: 50px;
}
.selectdBox {
  display: flex;
}
.el-button {
  padding: 8px 20px;
}
.el-input__inner {
  width: 300px;
}
.el-button {
  height: 40px;
}
.add {
  color: #409eff;
  font-size: 20px;
}
b {
  font-weight: 500;
}
.picWrapper {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 800px;
  height: 400px;
  transform: translate(-50%, -50%);
  z-index: 999999;
}
.picUrl:hover {
  opacity: 0.8;
  cursor: pointer;
}
.maskBigger {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: rgb(0, 0, 0, 0.6);
  z-index: 99999;
}
.searchBox {
  margin-bottom: 20px;
}
.searchBox > div {
  display: flex;
  align-items: center;
}
.detailes {
  display: flex;
  align-items: center;
}
.catList{
  display: flex;
  flex-wrap: wrap;
  /* border: 1px solid #ccc;
  border-top: 0; */
}
.catList>div{
  width: 33.333%;
  border: 1px solid #ccc;
  /* border-top: 0; */
  /* border-bottom: 0;/ */
  text-align: center;
  padding: 8px 0;
}
.goodsInfotTitle{
  display: flex;
  padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}
.goodsInfotTitle > div{
  width: 170px;
    /* box-sizing: border-box; */
}
.goodsInfotCont{
  align-items: center;
  display: flex;
}
.goodsInfotCont>span{
  width: 153px;
  display: block;
  box-sizing: border-box;

  
}
</style>
